<template>
	<view class="write-off bg-fa" >
		<!-- 订单详情 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center"><text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">订单详情</text>
			</view>
		</u-navbar>
		<view class="set-data-container w-750 b-box d-flex flex-c ali-i-c just-s po-re" style="background: #FAFAFA;"
			:style="{height:containerHeight}">
			<!-- 1 -->
			<view style="width:702rpx;min-height:834rpx;margin-top: 20rpx;border-radius: 16rpx;overflow: hidden;"
				class="bg-ff">
				<view style="padding:0 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">
					<view class="d-flex flex-c b-box w-100">
						<view
							style="min-height: 146rpx;padding: 30rpx 32rpx;border-bottom: 2rpx dashed #eeeeee;margin-bottom: 36rpx;"
							class=" b-box d-flex flex-r ali-i-c just-s bg-ff">
							<view
								style="width:140rpx ;height:140rpx;margin-right: 16rpx;border-radius:16rpx;overflow: hidden;"
								class="b-box">
								<image :src="require('../static/icon/kefu2.png')" style="width:140rpx ;height:140rpx">
								</image>
							</view>
							<!--  -->
							<view style="height: 140rpx;" class="b-box d-flex flex-c ali-i-s just-s bg-ff">
								<view class="d-flex flex-r ali-i-c just-sw b-box w-100" style="margin-bottom: 8rpx;">
									<text class="fw-500 pf-sc c-333 fz-32 text-ep-1" style="width: 300rpx;">外部清洗</text>
								</view>
								<view class="d-flex flex-c ali-i-s just-s b-box"
									style="min-height: 70rpx;width: inherit;padding-right: 26rpx;">
									<view class="w-100 b-box d-flex flex-r ali-i-c just-sw">
										<text class="pf-sc fw-300"
											style="font-size: 22rpx;color: #999999;margin-bottom: 26rpx;">京G4641M</text>
									</view>
									<view class="b-box d-flex flex-r ali-i-c just-s">
										<text class="pf-sc fw-500 po-re"
											style="font-size: 22rpx;color: #FF5C00;top:2rpx">¥</text>
										<text class="pf-sc fw-600"
											style="font-size: 28rpx;color: #FF5C00;">186.00</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 核销码 -->
						<view style="margin-bottom: 14rpx;" class="w-100 b-box d-flex flex-c ali-i-c just-c">
							<view style="width:351rpx ;height:351rpx;">
								<image :src="require('../static/icon/kefu2.png')" style="width:351rpx ;height:351rpx;">
								</image>
							</view>
						</view>
						<view class="w-100 b-box d-flex flex-c ali-i-c just-c bg-ff">
							<text class="pf-sc fw-400 c-333" style="font-size: 36rpx;">核销码：02315645435</text>
						</view>
						<!--  -->
						<view class="w-100 b-box bg-ff">
							<view class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 92rpx;border-bottom: 1rpx solid #eeeeee;">
								<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">优惠券</text>
								<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #FF5C00;">￥20.00</text>
							</view>
							<view class="d-flex flex-r ali-i-c just-sw w-100" style="height: 92rpx;">
								<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">支付金额</text>
								<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #FF5C00;">￥146.00</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 2 -->
			<view style="margin-bottom: 20rpx;width:702rpx;margin-top: 20rpx;" class="d-flex flex-c ali-i-s bg-fa just-s w-100">
				<view style="height: 82rpx;" class="d-flex flex-r ali-i-c just-s w-100">
					<text class="pf-sc c-333 fw-500 " style="font-size: 30rpx;">订单信息</text>
				</view>
				<view style="border-radius: 16rpx;overflow: hidden;" class="w-100 b-box">
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">车辆位置</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">中原区林山寨郑州人民政府</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">停靠位置</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">详细位置</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">车辆信息</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">京G4641M/18654789658</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">服务项目</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">外部清洗</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">服务时间</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">07月14日 19:00</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">备注信息</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">备注</text>
					</view>
				</view>
			</view>
			<!-- 3 -->
			<view style="margin-bottom: 20rpx;width:702rpx;margin-top: 20rpx;" class="d-flex flex-c ali-i-s just-s w-100">
				<view style="height: 82rpx;" class="d-flex flex-r ali-i-c just-s w-100 bg-fa">
					<text class="pf-sc c-333 fw-500 " style="font-size: 30rpx;">师傅信息</text>
				</view>
				<view style="border-radius: 16rpx;overflow: hidden;" class="w-100 b-box">
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">师傅姓名</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">王毅</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">师傅电话</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color:#555555;">15687985456</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">师傅起点</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">河南郑州金水区</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">订单距离</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">9.25km</text>
					</view>
				</view>
			</view>
			<!-- 4 -->
			<view style="margin-bottom: 20rpx;width:702rpx;margin-top: 20rpx;" class="d-flex flex-c ali-i-s just-s w-100">
				<view style="height: 82rpx;" class="d-flex flex-r ali-i-c just-s w-100 bg-fa">
					<text class="pf-sc c-333 fw-500 " style="font-size: 30rpx;">其它信息</text>
				</view>
				<view style="border-radius: 16rpx;overflow: hidden;" class="w-100 b-box">
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">订单编号</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">46378686345</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;margin-bottom: 1rpx solid #eeeeee;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">下单时间</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color:#rpx555555;">2022-07-06 15:00</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-sw bg-ff" style="height: 82rpx;padding: 0 24rpx;">
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #666666;">付款时间</text>
						<text class="pf-sc fw-400 " style="font-size: 28rpx;color: #555555;">2022-07-06 15:00</text>
					</view>
				</view>
			</view>
			<!-- 5 -->
			<view style="margin-bottom: 20rpx;width:702rpx;margin-top: 20rpx;" class="d-flex flex-c ali-i-s just-s w-100">
				<view style="height: 82rpx;background: #FAFAFA;" class="d-flex flex-r ali-i-c just-s w-100">
					<text class="pf-sc c-333 fw-500 " style="font-size: 30rpx;">订单日志</text>
				</view>
				<view style="border-radius: 16rpx;overflow: hidden;padding: 20rpx;" class="w-100 b-box">
					<u-steps current="0" direction="column" dot activeColor="#CC987A" inactiveColor="#CC987A">
						<u-steps-item title="已签收"
							desc="本人已签收，签收人凭取货码签收。感谢使用圆通速递，期待再次为您服务。">
						</u-steps-item>
						<u-steps-item title="派送中" desc="您的快件正在派送中">
						</u-steps-item>
						<u-steps-item title="运输中" desc="郑州金水区公司已发出">
						</u-steps-item>
						<u-steps-item title="已发货" desc="包裹正等待揽收">
						</u-steps-item>
					</u-steps>
				</view>
			</view>
			
			
			
		</view>

	</view>
</template>

<script>
	import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
	import uSteps from '../components/uview-ui/components/u-steps/u-steps';
	import uStepsItem from '../components/uview-ui/components/u-steps-item/u-steps-item';
	import {
		_containerHeight
	} from '@/utils/GetSys.js';
	export default {
		components: {
			'u-navbar':Unavbar,
			'u-steps':uSteps,
			'u-steps-item':uStepsItem,
		},
		data() {
			return {
				containerHeight: ''
			};
		},
		onLoad() {
			this.containerHeight = _containerHeight();
		}

	}
</script>

<style lang="scss">
	.write-off {
		.showmore{
			height: 500rpx !important;
		}
		.hidemore{
			height: 0rpx !important;
			overflow: hidden !important; 
		}
		.u-steps-item__content--column{
			margin-left: 20rpx !important;
			margin-top: -8rpx !important;
			height: 120rpx !important;
			.u-text{
				flex: none !important;
			}
		}
		.u-steps-item{
			
		}
		.u-steps{
			width: 100% !important;
		}
		.u-steps-item__wrapper--column--dot{
			width:20rpx !important;height: 20rpx !important;  //dot
		}
		.u-steps-item__wrapper__dot{
			width:20rpx !important;height: 20rpx !important;  //dot
		}
		.u-steps-item__line--column{
			left: 10rpx !important;
		}
		.u-steps--column{
			min-height: 300rpx;
			.u-steps-item--column{
				.u-text__value--content{
					font-size: 26rpx !important; //标题
				}
				.u-text__value--tips{
					font-size: 26rpx !important; //时间
				}
			}
		}
		.u-text__value{
			font-size: 30rpx !important;
			font-family: PingFang SC-Medium, PingFang SC !important;
			font-weight: 500 !important;
			color: #333333 !important;
		}
	}
</style>
